<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form name="form">
      <p>
        <input type="checkbox" name="hobbys" checked value="css" /> CSS
        <input type="checkbox" name="hobbys" checked value="html" /> HTML
        <input type="checkbox" name="hobbys" checked value="js" /> JS
        <input type="checkbox" name="hobbys" value="sass" /> SASS
      </p>
    </form>
    <script>
      console.log(document.form.hobbys);
      // console.log(document.form.querySelectorAll('[type="checkbox"]:checked'));
      console.log([...document.form.hobbys].filter((el) => el.checked));
      console.log(
        [...document.form.hobbys]
          .filter((el) => el.checked)
          .map((el) => el.value)
      );

      setTimeout(() => {
        const arr = ["js", "css"];
        [...document.form.hobbys].forEach(
          (el) => (el.checked = arr.includes(el.value))
        );
      }, 3000);
    </script>
  </body>
</html>
